<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>大众点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/info.css" rel="stylesheet">


  <style type="text/css">
      .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 30%;
		 
      }

      .el-tabs, .el-tab-pane {
          height: 100%;
      }

      .el-tabs__header {
          height: 5%;
      }

      .el-tabs__content {
          height: 100%;
      }
	   b,span{
	   
		font-family:"Times New Roman" ,Times, serif;
	  }
	  <!--在同一平行 -->
	  div{
	  white-space: nowrap
	  }
	  #bTitle{
	     align-items: center;
		font-size:10px;
	  
	  }
	  .setcount{
	  font-weight: bold;
	   font-size: 13px;
	   color: red;
	  }
	  .setTimeSize{
	     font-size:1%;
		 font-family:"Lucida Handwriting", Times, serif;
		 color: maroon;
	    
	  }
	  .setName{
	  font-weight: bold;
	   color: purple;
	  
	  }
	  .noExit{
	     color:red;
	  
	  
	  }
	
	
  </style>

</head>

<body>
<div id="app">
  <div class="header">
    <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
    <div class="header-title" >消息中心&nbsp;&nbsp;&nbsp;</div> 
	
	  	<el-button @click="drawer = true" type="success" style="margin-left: 16px;">
  点击打开留言
</el-button>

<el-drawer
		style="height:130%"
		  title="留言中心"
		  :visible.sync="drawer"
		  :direction="direction"
		  :before-close="handleClose">
 
   <el-select  clearable  filterable  placeholder="请选择给谁留言"  v-model="selectUser"  >  <!--clearable可以清除 filterable可以搜索-->
      <el-option v-for="(f,index) in form.allUsers" :label="f.nickName" :value="f.id":key="f.id" >{{f.nickName}}</el-option>
    </el-select>
	
    <el-input style="margin-top:20px" type="textarea" v-model="mmessage" placeholder="留言内容（最少输入两个字）"    maxlength="30" minlength="2" show-word-limit required></el-input>
	<el-button style="margin-top:10px" type="primary" :plain="true" @click="onSubmit" :disabled="disabled">{{this.MessBtn}}</el-button>
</el-drawer>
  </div>






<!-- <div>
     <el-card shadow="hover" style="width: 60%;margin-top: 20px; ">
                                <div style="width: 30%; display: inline-block;">
                                    <el-statistic
                                            format="DD天HH小时mm分钟ss秒"
                                            :value="deadline5"
                                            time-indices
                                            title="🚩距离立夏还有："
                                    >
                                    </el-statistic>
                                </div>
                            </el-card >
</div> -->
	
	

    <div class="mess-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      
	  <el-tab-pane label="所有动态" name="1">
	
	       <!--查询所有动态 -->
		   <el-button type="primary" @click="likeBlogMessages" plain size="mini" round>刷新</el-button>
			 <div class="f-list" @scroll="onScroll">
			
			 <p  >共有:<b class="setcount" >{{this.likeMessages.length}}</b>条消息</p>
				 <div class="ff-box" v-for="(f,index) in likeMessages" :key="f.id">
				
				   <div class="f-foot">
				   
					 <div class="mess-user-icon" @click="toOtherInfo(f)"><img :src="f.icon || '/imgs/icons/default-icon.png'" alt=""></div> 
							 <div class="blog-user-name" >{{f.likeName}} </div>
					<div>
								
								<span class="setName" v-if="f.likeName">	{{f.likeName}}</span> 
								<b v-else class="noExit">该账号已注销！</b>
									于 {{f.createTime==f.updateTime? f.createTime:f.updateTime}} 
									<div  v-if="f.isliked>-1">
											<span style="color:blue"> {{ f.isliked ==1? '点赞了' : '取消了赞' }}</span> <span class="setName" >{{f.authorName}}
										</span>
										<span v-if="f.title!=null">
										的文章:
										<span style="color:red"  @click="toBlogDetail(f)" class="tooltip" >《{{f.title}}》
											<span class="tooltiptext">点击查看博客详情</span>
										</span>
										这篇现在有<span class="setcount">{{ f.isliked==1?f.oldlikes+1:f.oldlikes-1}}❤</span>
										我点赞前有<span class="setcount" >{{f.oldlikes}}❤</span>
										</span>
										</span>
						         </div>
								     <span v-else>
											<span  style="color:blue"> {{ f.iscare==1? '关注了' : '取关了' }}</span> 
											<span class="setName" v-if="f.authorName">{{f.authorName}}
										</span>
											<b class="noExit" v-else> 该账号已注销！
										</b>
										</span>								
					  </div>				
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
      <el-tab-pane label="我的动态" name="2">
		 <el-button type="success" @click="queryMyLikeBlogMessages" plain size="mini" round >刷新</el-button>
	
	       <div class="f-list" @scroll="onScroll">
			 <p >共有:<b class="setcount" >{{this.myLikeBlogMessages.length}}</b>条消息</p>
		
				 <div class="ff-box" v-for="(f,index) in myLikeBlogMessages" :key="f.id">
		
				   <div class="f-foot">
				
					 <div class="mess-user-icon" @click="toOtherInfo(f)"><img :src="f.icon || '/imgs/icons/default-icon.png'" alt=""></div> 
							 <div class="blog-user-name" v-if="f.likeName" >{{f.likeName}} </div>
					
							 <div v-else class="noExit">该账号已注销！</div>
							    	
					<div>
					
								<span class="setName">
								
									{{f.likeName}}</span> 于 {{f.createTime==f.updateTime? f.createTime:f.updateTime}} 
									<div  v-if="f.isliked>-1">
											<span style="color:blue"> {{ f.isliked ==1? '点赞了' : '取消了赞' }}</span> <span class="setName" >{{f.authorName}}
										</span>
										<span v-if="f.title!=null">
										的文章:
										<span style="color:red"  @click="toBlogDetail(f)" class="tooltip" >《{{f.title}}》
											<span class="tooltiptext">点击查看博客详情</span>
										</span>
										这篇现在有<span class="setcount">{{ f.isliked==1?f.oldlikes+1:f.oldlikes-1}}❤
										</span>我点赞时之前有<span class="setcount" >{{f.oldlikes}}❤</span>
										</span>
										</span>
						         </div>
								     <span v-else>
											<span  style="color:blue"> {{ f.iscare==1? '关注了' : '取关了' }}</span> 
											<span class="setName" v-if="f.authorName">{{f.authorName}}</span>
										
												<b class="noExit" v-else> 该账号已注销！</b>
											
									</span>								
					  </div>				
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
	   <el-tab-pane label="消息" name="4">
	        
		<el-button type="primary" @click="queryAllMessage" plain size="mini" round>刷新</el-button>
		<el-button type="danger" @click="queryMyGetMessage" plain size="mini" round>只看我的消息</el-button>
			 <div class="f-list" @scroll="onScroll">
			 <p  >共有:<b class="setcount" >{{this.myGetMessage.length}}</b>条消息</p>
				 <div class="ff-box" v-for="(f,index) in myGetMessage" :key="f.id">
				 <span v-if="index===0 ||this.isMyMessage===1" >
				<span >  登录用户:
					<span class="setName" >	{{f.adminUser}}</span>
					共发出:<b class="setcount" >{{f.sendCount}}</b> 
			    共收到:<b class="setcount" >	{{f.messCount}}<b> </span> 
			    
			   </span>
				   <div class="f-foot">
				   
				   <!-- 账号是否存在 -->
					   <span v-if="f.messName">
								 <div class="mess-user-icon" @click="toOtherInfo(f)"><img :src="f.messIcon || '/imgs/icons/default-icon.png'" alt=""></div> 
								 <div class="blog-user-name" @click="toOtherInfo(f)"  >{{f.messName}} </div>	 
					  </span>
					  <span v-else>
					   <div class="mess-user-icon" ><img :src="'/imgs/icons/default-icon.png'" alt=""></div> 
								 <div class="blog-user-name"   >{{f.messName}} </div>	 
					  </span>
							
					<div style="color:black">
					
				
								<span class="setName" @click="toOtherInfo(f,1)" v-if="f.sendName">	{{f.sendName}}</span> 
								<span v-else style="color:red;">该账号已注销！</span>
								于
								<span class="setTimeSize">{{f.createTime}} </span>
									<div >
											<span > 发送给</span> 
											<span class="setName" @click="toOtherInfo(f)" v-if="f.messName">{{f.messName}}</span>
											<span v-else style="color:red;">该账号已注销！</span>
									
										内容是:
										<span style="color:green" >{{f.content}} </span>
										</span>
						         </div>
								    						
					  </div>				
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
  </el-tabs>
  </div>
  <foot-bar :active-btn="3"></foot-bar>
</div>


<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
</body>
<script>
  const app = new Vue({
    el: "#app",
    data: {
	 deadline5: new Date("2024-03-23"),
	likeGoods:0, //我获得的赞
	oldlikeGoods:0,//我之前获得赞
        drawer: false,
        direction: 'ttb', //从上往下开
	disabled : false ,//留言按钮禁用
	selectUser: '',//被留言的用户
	mmessage:'', //留言的内容
	MessBtn: '提交留言' ,//留言按钮
	myGetMessage:[], // 我收到的消息
	isMyMessage: '0',//是否为我的消息 1是 0不是
	 form:{
	 
	  name: '',
	  allUsers:[ ],//所有用户
	 },
      relMess: "",//留言返回的值
      user: "",
      activeName: "1",
      info: {},
	  oneselfLike: "1",//我获得的喜欢
      blogs: [],
	    likeMessages: [], //获赞的消息
		myLikeBlogMessages: [], //我的获赞和消息
	  likeBlogs: [],//喜欢的博客
	  follows: [], //粉丝列表
	  cares: [], //我关注的人
      blogs2: [], // 关注的人的播客
      params: {
        minTime: 0, // 上一次拉取到的时间戳
        offset: 0, // 偏移量
      },
      count: 5,
      isReachBottom: false,
    },
    created() {
	this.likeBlogMessages();  //所有获赞的消息
      this.queryUser(); //查询用户信息
	  this.queryFollows();  //查询粉丝
	  this.queryMyCares();//查询我的关注
	  this.querylikeBlogs();//查询喜欢的博客
	  this.queryMyGetLiked();//查询我获得的喜欢
	  
	//  this.queryMyLikeBlogMessages();//我的获赞和关注消息
	 // this.open1();
	  this.queryAllUser();//查询所有用户
	 
	  
    },
	//监视属性
watch:{
	'likeGoods'(newVal, oldVal){
		if(newVal != oldVal && newVal != ""){
			console.log("之前的值为"+oldVal+"现在的为"+newVal);
			this.oldlikeGoods=oldVal;
		}
	},
	'myLikeBlogMessages'(newVal, oldVal){
		if(newVal != oldVal && newVal != ""){
			
		}
	}
	},
	<!-- computed{ -->
	<!-- x(){ -->
	<!-- return this.lf.countLikes -->
	
	<!-- } -->
	<!-- }, -->


    methods: {
      load() {
        this.count += 2;
      },
	  //抽屉模式
	   handleClose(done) {
       
            done();
         
      
    },
	   open1() {
        const h = this.$createElement;
        this.$notify({
          title: '温馨提示',
          message: h('i', { style: 'color: red'}, '点击红字标题可以查看博客')
		  
        });
      },
	   succesCommit() {
        this.$message({
          message: '留言提交成功',
          type: 'success'
        });
      },
	    openMessage() {
        const h = this.$createElement;
        this.$notify({
          title: '',
          message: h('i', { style: 'color: red'}, '提交的内容为:'+this.mmessage)
		  
        });
      },

      open2() {
        this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });
      },

    

	  //留言提交按钮
	   onSubmit() {
	      if(this.mmessage.length<2 || !this.selectUser){
          this.$message.error("留言用户不能为空和留言内容至少为2");
          return
        }	
		   <!-- let param = new URLSearchParams() -->
		   <!-- param.append('name', this.selectUser) -->
		   <!-- param.append('message', this.mmessage) -->
        
		   axios({
			   headers: {
				   'Content-Type': 'application/json; charset=utf-8'
			   },
			   method: 'post',
			   url: '/message/messToOther',
			    data: {
			           messId: this.selectUser,
                        message: this.mmessage}
		   }).then(({data}) => {
		      this.relMess=data
			  console.log(this.relMess)
		   })
		   this.$message({
          message: '留言成功',
          type: 'success'
        });
		//this.openMessage(),
		   // 禁用按钮
        this.disabled = true;
	
        // 按钮倒计时
        let i = 3;
        this.MessBtn = (i--) + '秒后可重发'
        let taskId = setInterval(() => this.MessBtn = (i--) + '秒后重发留言', 1000);
        setTimeout(() => {
          this.disabled = false;
          clearInterval(taskId);
          this.MessBtn = "发送留言";
        }, 3000)
		//清空内容
		this.mmessage='',
		this.selectUser=''
	
      },
	  
	    //所有消息
	  queryAllMessage(){
	  this.likeGoods++;
	  this.countPlay=0;
	    axios.get("/message/allMessage")
		 .then(({data})=>{
		 this.isMyMessage=false;
		  this.myGetMessage=data;
		 
		 })
	  },
	  //我的消息，我收发的
	  queryMyGetMessage(){
	  this.countPlay=0;
	    axios.get("/message/myGetMessage")
		 .then(({data})=>{
		 this.isMyMessage=true;
		  this.myGetMessage=data;
		 
		 })
	  },
	
	 
	   //获赞的消息
	  likeBlogMessages(){
	    axios.get("/likeBlog/likeMessages")
		    .then(({data}) => {
             this.likeMessages=data;
			 
			 
			 
			})
	  },
	  //我的获赞和关注
	    queryMyLikeBlogMessages(){
	    axios.get("/likeBlog/myLikeBlogMessages")
		    .then(({data}) => {
             this.myLikeBlogMessages=data
			 
			 })
	  },
	  //查询喜欢的博客
	  querylikeBlogs(){
	     axios.get("/blog/likeBlogs")
		    .then(({data}) => {
             this.likeBlogs=data})
			//.catch(this.$message.error)
	  },
	  //查询我获得的喜欢
	  queryMyGetLiked(){
	     axios.get("/blog/myGetlike")
		    .then(({data}) => {
             this.oneselfLike=data})
	  },
       queryBlogs() {
        axios.get("/blog/of/me")
          .then(({data}) => this.blogs = data)
          .catch(this.$message.error)
      },
	  //查询粉丝
		queryFollows(){
		   axios.get("/follow/listOfFollows")
		    .then(({data}) => {
             this.follows=data
          })
		},
	//查询关注的人的
	queryMyCares(){
		   axios.get("/follow/myCares")
		    .then(({data}) => {
             this.myCares=data
          })
		},
		
			//查询所有用户
	queryAllUser(){
		   axios.get("/user/list")
		    .then(({data}) => {
             this.form.allUsers=data
          })
		},
      queryBlogsOfFollow(clear) {
        if (clear) {
          this.params.offset = 0;
          this.params.minTime = new Date().getTime() + 1;
        }
        let {minTime, offset: os} = this.params;
        axios.get("/blog/of/follow", {
            params: {offset: os, lastId: minTime || new Date().getTime() + 1}
          })
          .then(({data}) => {
            if (!data) {
              return;
            }
            let {list, ...params} = data;
            list.forEach(b => b.img = b.images.split(",")[0])
            this.blogs2 = clear ? list : this.blogs2.concat(list);
            this.params = params;
          })
          .catch(e => console.log(e))
      },
      queryUser() {
        // 查询用户信息
        axios.get("/user/me")
          .then(({data}) => {
            // 保存用户
            this.user = data;
			console.log(this.user)
            // 查询用户详情
            this.queryUserInfo();
            // 查询用户笔记
            this.queryBlogs();
          })
          .catch(err => {
            location.href = "login.html"
          })
      },
      goBack() {
        history.back();
      },
      queryUserInfo() {
        axios.get("/user/info/" + this.user.id)
          .then(({data}) => {
            if (!data) {
              return
            }
            // 保存用户详情
            this.info = data;
            // 保存到本地
            sessionStorage.setItem("userInfo", JSON.stringify(data))
          })
          .catch(err => {
            this.$message.error(err);
          })
      },
      toEdit() {
        location.href = 'info-edit.html'
      },
      logout() {
        axios.post("/user/logout")
          .then(() => {
            // 清理session
            sessionStorage.removeItem("token")
            // 跳转
            location.href = "/"
          })
          .catch(this.$message.error)
      },
	  //tab点击事件
      handleClick(r) {
        if (r.name === '4') {
          this.queryBlogsOfFollow(true);
		  this.queryAllMessage();////消息中心的所有消息
		  this.isMyMessage=false;
        }else if(r.name==='2'){
		this.queryMyLikeBlogMessages();
		  
		}else if(r.name==='1'){
		this.queryMyLikeBlogMessages();
		this.likeBlogMessages();
		  
		}
		
      },
      addLike(b) {
        axios.put("/blog/like/" + b.id)
          .then(({data}) => {
            this.queryBlogById(b);
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      queryBlogById(b) {
        axios.get("/blog/" + b.id)
          .then(({data}) => {
            b.liked = data.liked;
            b.isLike = data.isLike;
          })
          .catch(() => {
            this.$message.error
            b.liked++;
          })
      },
      onScroll(e) {
        let scrollTop = e.target.scrollTop;
        let offsetHeight = e.target.offsetHeight;
        let scrollHeight = e.target.scrollHeight;
        if (scrollTop === 0) {
          // 到顶部了，查询一次
          this.queryBlogsOfFollow(true);
        } else if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
          this.isReachBottom = true
          // 再次查询下一页数据
          this.queryBlogsOfFollow();
        } else {
          this.isReachBottom = false
        }
      },
	  //跳转其他用户界面
      toOtherInfo(f,a){
        if(f.userId==this.user.id){
          location.href = "/info.html"
        }else  if(f.messId!=null) {
          location.href = "/other-info.html?id=" + f.messId
        }else  if(a==1) {
          location.href = "/other-info.html?id=" + f.sendId//前面设置好的，会传入（f,1）
        }
		else   {
          location.href = "/other-info.html?id=" + f.userId
        }
      },
	 
      toBlogDetail(f) {
        location.href = "/blog-detail.html?id=" + f.blogId
      }
    },

  })
</script>
</html>